/**
 * 系统管理 用户管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>字典管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :inline="true" :model="searchForm" class="user-search">
      <el-form-item label="">
        <!--<el-input size="small" v-model="searchForm.username" placeholder="输入用户名"></el-input>-->
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()"  v-if="sys_dict_edit">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table size="small"  :data="tableData" highlight-current-row v-loading="tableLoading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center"  prop="value" label="值">
      </el-table-column>
      <el-table-column align="center"  prop="label" label="标签名">
      </el-table-column>
      <el-table-column align="center"  prop="type" label="种类">
      </el-table-column>
      <el-table-column align="center"  prop="description" label="描述">
      </el-table-column>
      <el-table-column align="center"  prop="createTime" label="创建时间">
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="300">
        <template slot-scope="scope">
      <el-button type="text"
                 v-if="permissions.sys_dict_edit"
                 icon="el-icon-check"
                 size="mini"
                 plain
                 @click="handleEdit(scope.row,scope.index)">编辑
      </el-button>
      <el-button type="text"
                 v-if="permissions.sys_dict_del"
                 icon="el-icon-delete"
                 size="mini"
                 plain
                 @click="handleDel(scope.row,scope.index)">删除
      </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="page" @callFather="callFather"></Pagination>
    <el-dialog  ref="editForm" :model="editForm" :visible.sync="editFormVisible" width="30%" @click='closeDialog()'>

      <el-form label-width="80px" ref="editForm" :model="editForm" >
      <el-form-item label="数据值" prop="value">
        <el-input size="small" v-model="editForm.value" auto-complete="off" placeholder="请输入数据"></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-input size="small" v-model="editForm.type" auto-complete="off" placeholder="请输入类型"></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input size="small" v-model="editForm.sort" auto-complete="off" placeholder="请输入排序"></el-input>
      </el-form-item>
      <el-form-item label="标签名" prop="label">
        <el-input size="small" v-model="editForm.label" auto-complete="off" placeholder="请输入标签名"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input size="small" v-model="editForm.description" auto-complete="off" placeholder="请输入描述"></el-input>
      </el-form-item>
      <el-form-item label="备注信息" prop="remarks">
        <el-input size="small" v-model="editForm.remarks" auto-complete="off" placeholder="请输入备注信息"></el-input>
      </el-form-item>



      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click='closeDialog()'>取消</el-button>
        <el-button size="small" type="primary"  class="title"  @click="submitForm('editForm')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import Pagination from '../../../components/Pagination'
  import {addObj, delObj, fetchList, putObj} from '@/api/admin/dict'
  import {mapGetters} from 'vuex'
  export default {
    name: 'dict',
    data() {
      return {
        searchForm:{

        },
        editForm: {
          id: '',
          value: '',
          type: '',
          sort: '',
          label: '',
          description: '',
          remarks: ''
        },
        editFormVisible: false,
        sys_dict_edit: false,
        sys_dict_del: false,
        tableData: [],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 20 // 每页显示多少条
        },
        tableLoading: false
      }
    },
    created() {
      this.sys_dict_edit = this.permissions['sys_dict_edit']
      this.sys_dict_del = this.permissions['sys_dict_del']

      this.getList();
    },

    // 注册组件
    components: {
      Pagination
    },
    mounted: function () {
    },

    computed: {
      ...mapGetters(['permissions'])
    },
    methods: {
      closeDialog(){
        this.editFormVisible = false;
      },
      // 分页插件事件
      callFather(parm) {
        this.page.currentPage = parm.currentPage
        this.page.pageSize = parm.pageSize
        this.getList();
        //  this.getdata(this.formInline)
      },
      search() {
        this.getList()
        //  this.getdata(this.formInline)
      },
      handleEdit: function(row,index ) {
        this.editFormVisible = true
        if (row != undefined && row != 'undefined') {
          this.editForm.id = row.id;
          this.editForm.value = row.value;
          this.editForm.type = row.type;
          this.editForm.sort = row.sort;
          this.editForm.label = row.label;
          this.editForm.description = row.description;
          this.editForm.remarks = row.remarks;
        } else {
          this.editForm.id = ''
          this.editForm.value = ''
          this.editForm.type = ''
          this.editForm.sort =''
          this.editForm.label =''
          this.editForm.description = ''
          this.editForm.remarks =''
        }

      },
      getList() {
        this.tableLoading = true
        fetchList(Object.assign({
          current:this.page.currentPage,
          size:this.page.pageSize
        },this.searchForm)).then(response => {
          this.tableData = response.data.data.records
          this.page.total = response.data.data.total
          this.tableLoading = false
        })
      },

      handleDel: function (row, index) {
        var _this = this
        this.$confirm('是否确认删除标签名为"' + row.label + '",数据类型为"' + row.type + '"的数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function () {
          return delObj(row)
        }).then(() => {
          this.getList()
          _this.$message({
            showClose: true,
            message: '删除成功',
            type: 'success'
          })
        }).catch(function () {
        })
      },
      /**
       * @title 数据更新
       * @param row 为当前的数据
       * @param index 为当前更新数据的行数
       * @param done 为表单关闭函数
       *
       **/
      submitForm: function (row, index, done) {
        if(this.editForm.id==''){
          addObj(this.editForm).then(data => {
            this.tableData.push(Object.assign({}, this.editForm))
            this.$message({
              showClose: true,
              message: '添加成功',
              type: 'success'
            })
            this.getList(this.page)
            this.editFormVisible = true;
          })
        }else{
          putObj(this.editForm).then(() => {
            this.tableData.splice(index, 1, Object.assign({}, this.editForm))
            this.$message({
              showClose: true,
              message: '修改成功',
              type: 'success'
            })
            this.getList()
            this.editFormVisible = true;
          })
        }


      }
    }
  }
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

